<div ng-app="myapp">
    <div draggable >draggable</div>
</div>

<script>
    var app = angular.module("myapp",[]);
    app.directive("draggable",function($document){
        var startX= 0,startY= 0,x = 0,y=0;
        return function(scope,element,attr){
            element.css({
                width:'100px',
                height:'100px',
                position:"relative",
                border:'1px solid red',
                backgroundColor:'lightgrey',
                cursor:'pointer'
            });

            element.bind("mousedown",function(){
                startX = event.screenX -x;
                startY = event.screenY -y;
                $document.bind('mousemove',mousemove);
                $document.bind('mouseup',mouseup);
            });

            function mousemove(event){
                y = event.screenY - startY;
                x = event.screenX - startX;
                element.css({
                    top:y+"px",
                    left:x+"px"
                });
            };
            function mouseup(){
                $document.unbind("mousemove",mousemove);
                $document.unbind("mouseup",mouseup);
            }
        };
    });
</script>